<template>
	<view class="layout">
		<view class="content" :class="isBackground ? 'background-color-gray' : ''">
			<view class="statusBar" :style="{ height: statusbar + 'px' }"></view>
			<view class="title" :style="{ height: menubox + 'px' }">
				<view class="left">
					<view class="back" v-if="isBack" @click="goToBack">
						<uni-icons type="left" color="#fff" size="18"></uni-icons>
						<text>返回</text>
					</view>
				</view>

				<view class="text">
					<text>{{ title }}</text>
				</view>
				<view class="right"></view>
			</view>
		</view>
		<view :style="{ height: (statusbar + menubox) + 'px' }"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {getStatusBarHeight,getMenuBox} from "@/utils/systemInfo.ts"
	// 接收父组件传递的参数
	const props = defineProps({
		isBack: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: '标题'
		},
		isBackground:{
			type: Boolean,
			default: false
		}
	})
	// 返回上一页
	function goToBack(){
		uni.navigateBack()
	}
	// 创建状态栏高度变量和菜单按钮盒子高度
	
	const statusbar = ref(getStatusBarHeight())
	const menubox = ref(getMenuBox())
	// 获取菜单按钮高度计算出盒子高度
	onLoad(() => {
		
	})
</script>


<style lang="scss" scoped>
.layout {
	width: 750rpx;

	.content {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
		background: linear-gradient(to right, #5aacfe, #2973c8);

		&.background-color-gray {
			background-color: gray; /* 或者其他颜色 */
		}

		.left {
			width: 200rpx;

			.back {
				margin-left: 40rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
			}
		}

		.title {
			display: flex;
			color: #FFF;
			justify-content: space-between;
			align-items: center;
			font-size: 34rpx;
			font-weight: bold;
		}

		.right {
			width: 200rpx;
		}
	}
}
</style>